<template>
  <div class="index">
    <div class="header">
      <div class="menu">
        <!-- <a-menu
          class="menu-list"
          mode="horizontal"
          :selected-keys="menuIndxe"
          @menu-item-click="click"
        >
          <a-menu-item key="1">1.基础设置</a-menu-item>
          <a-menu-item key="2">2.表单设计</a-menu-item>
          <a-menu-item key="3">3.流程设计</a-menu-item>
          <a-menu-item key="4">4.高级设置</a-menu-item>
        </a-menu> -->
        <a-steps
          :current="menuIndxe"
          class="menu-list"
          style="padding: 20px"
          changeable
          @change="click"
        >
          <a-step><template #icon>1</template>基础设置</a-step>
          <a-step><template #icon>2</template>表单设计</a-step>
          <a-step><template #icon>3</template>流程设计</a-step>
          <a-step><template #icon>4</template>高级设置</a-step>
        </a-steps>
      </div>
      <a-space>
        <!-- <a-button>保存下一步</a-button>
        <a-button :type="'outline'" status="warning">取消</a-button>
        <a-button :type="'primary'">发布</a-button> -->
      </a-space>
    </div>
    <!-- <Base v-if="menuIndxe[0] === '1'" />
    <Flow v-if="menuIndxe[0] === '3'"></Flow> -->
    <!-- <SetUpForm
      v-if="menuIndxe[0] === '2'"
      :tabCodeList="tabCodeList"
      :set-up-list="setUpList"
      v-model:layout="rest"
    /> -->
    <keep-alive>
      <component
        :is="componentName"
        v-model:data="form"
        @save="save"
      ></component>
    </keep-alive>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';

import Approval from '@/components/approval/index.vue';
import Base from './Base/index.vue';
import FormCtl from './FormCtl/index.vue';
import FlowCon from './Flow/index.vue';
import Advanced from './Advanced/index.vue';
import { Notification } from '@arco-design/web-vue';
import type { Flow, ApplicableBusiness } from '@/apis/flow/type';
import * as apiFlow from '@/apis/flow/index';
import { getFlowById, editFlow } from '@/apis/flow/index';
import { getApplicableBusiness } from '@/apis/applicableBusiness/index';

const router = useRouter();
const route = useRoute();

onMounted(() => {
  // window.onbeforeunload = () => {
  //   return "数据未保存，离开即丢失，确定离开？";
  // };
  //   window.addEventListener("beforeunload", function(event) {
  //     event.returnValue = "我在这写点东西...";
  // });
  //解除绑定，一般放在提交触发事件中
  // window.onbeforeunload = null;
  init();
});

const menuIndxe = ref<number>(1);
const componentName = computed(() => {
  if (menuIndxe.value === 1) {
    return Base;
  }
  if (menuIndxe.value === 2) {
    return FormCtl;
  }
  if (menuIndxe.value === 3) {
    return FlowCon;
  }
  if (menuIndxe.value === 4) {
    return Advanced;
  }
  return Base;
});
const click = (e: any) => {
  if (!Number(route.query.id)) {
    Notification.warning('请先设置基础信息');
    return;
  }
  menuIndxe.value = e;
  //   console.log(e);
};

const form = ref<Flow>({
  icon: 'icon-mosaic'
});

const getFlowProcess = async () => {
  if (!Number(route.query.id)) return;
  form.value = {};
  let res = await getFlowById(Number(route.query.id));
  form.value = res?.processInfo || {};
};
const init = () => {
  form.value.groupCode = `${route.query.groupCode}`;
  getFlowProcess();
  getApplicableBusinessList();
};
const applicableBusinessList = ref<ApplicableBusiness[]>([]);
/**
 * 获取适用范围
 */
const getApplicableBusinessList = async () => {
  const res = await getApplicableBusiness();
  applicableBusinessList.value = res.list || [];
};
/**
 * 保存流程
 * @param type 基础设置、表单设计、流程设计、高级设置
 */
const save = async (type: 'base' | 'flow' | 'form' | 'advanced') => {
  if (!type) return;
  if (type === 'base') {
    //
  }
  if (type === 'form') {
    //
  }
  if (type === 'advanced') {
    await editFlow(form.value);
  }
  Notification.info('保存成功');
};
</script>
<style lang="less" scoped>
.index {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border: 1px #eee solid;
    .menu {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      :deep(.arco-menu) {
        width: 550px;
      }
      &-lsit {
        //   width: 550px;
      }
    }
  }
}
</style>
